<template>
	<page-body>
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center anquanyl_flex_0_higd"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub anquanyl_fd0_0_higd'>
					<view class='flex flex-wrap align-center anquanyl_fd0_0_c0_higd' @tap.stop="handleJumpDiy"
						data-type="back" data-url="1">
						<text class='fu-iconfont2  anquanyl_fd0_0_c0_c0_higd'>&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='anquanyl_fd0_0_c1_c0_higd'>{{$t('安全演练')}}</text>
					</view>
					<view class='flex flex-wrap align-center justify-end anquanyl_fd0_0_c0_higd'>
					</view>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!---flex布局flex布局开始-->
			<view class="flex benben-flex-layout flex-wrap align-center">
				<view>
					<benben-flex-tabs class-name='anquanyl_benbenTabsfd1_0_higd' v-model="tabsTypefd1_0"
						ref="benben_tabsfd1_0" select-mark="benben_tabsfd1_0" key="benben_tabsfd1_0"
						:open-title-type='false' :open-sticky='true' :top='0' :is-show-content='false'
						:scrollspy='false' :tabs-info.sync="tabsInfofd1_0">

						<scroll-view @scroll="tabsInfofd1_0.scrollX = $event.detail.scrollLeft" id="benben_tabsfd1_0"
							class="benben-tabs" style="width:750rpx" :scroll-x="true" :scroll-left="tabsInfofd1_0.moveX"
							scroll-with-animation="all .3s ease" :show-scrollbar='false' :enhanced="true">
							<view class="benben-tabs-content" id="benben_tabsfd1_0-content">
								<view id="benben_tabsfd1_0-title"
									class="benben-tabs-title flex flex align-center justify-around">
									<view
										:class="{ 'checkTitlefd1_0_higd': tabsTypefd1_0 == '1', 'flex flex-wrap align-center': true }"
										@tap="check(1)" :id="`benben_tabsfd1_0-title-item-${'1'}`">

										<text>{{$t('未进行')}}</text>

									</view>
									<view
										:class="{ 'checkTitlefd1_0_higd': tabsTypefd1_0 == '2', 'flex flex-wrap align-center': true }"
										@tap="check(2)" :id="`benben_tabsfd1_0-title-item-${'2'}`">

										<text>{{$t('进行中')}}</text>

									</view>
									<view
										:class="{ 'checkTitlefd1_0_higd': tabsTypefd1_0 == '3', 'flex flex-wrap align-center': true }"
										@tap="check(3)" :id="`benben_tabsfd1_0-title-item-${'3'}`">

										<text>{{$t('已完成')}}</text>

									</view>
								</view>
								<view :style="{ left: tabsInfofd1_0.lineleft, maxWidth: tabsInfofd1_0.lineWidth ,}"
									id="benben_tabsfd1_0-line"
									class="benben-tabs-line flex benben-flex-tabs-line anquanyl_linefd1_0_higd"
									:class="{'benben-tabs-line-active':tabsInfofd1_0.isInit}"></view>
							</view>
						</scroll-view>

					</benben-flex-tabs>

				</view>
				<view class='flex flex-direction align-stretch flex-sub anquanyl_fd1_1_higd'>
					<template v-for='(item,key0) in list'>
						<view class='flex flex-direction align-stretch anquanyl_fd1_1_c0_higd' :key='key0'  @tap.stop="handleJumpDiy"
						data-type="navigateTo" :data-url="`/pagesanfang/js/yldetail/yldetail?id=${item.aid}&type=${tabsTypefd1_0}`">
							<view class='flex flex-wrap align-center anquanyl_fd1_1_c0_c0_higd'>
								<text>{{item.ylmc}}</text>
							</view>
							<view class='flex flex-wrap align-center justify-around anquanyl_fd1_1_c0_c1_higd'>
								<view class='flex flex-direction flex-wrap align-center'>
									<text class='anquanyl_fd1_1_c0_c1_c0_c0_higd'>{{$t('总人数')}}</text>
									<text class='anquanyl_fd1_1_c0_c1_c0_c1_higd'>{{item.zrs}}</text>
								</view>
								<view class='flex flex-direction flex-wrap align-center'>
									<text class='anquanyl_fd1_1_c0_c1_c0_c0_higd'>{{$t('演练地点')}}</text>
									<text class='anquanyl_fd1_1_c0_c1_c0_c1_higd'>{{item.tgxxxjcxxxqjbxx_xqmc}}</text>
								</view>
								<view class='flex flex-direction flex-wrap align-center'>
									<text class='anquanyl_fd1_1_c0_c1_c0_c0_higd'>{{$t('演练主持人')}}</text>
									<text class='anquanyl_fd1_1_c0_c1_c0_c1_higd'>{{item.memberuser_nickname}}</text>
								</view>
							</view>
							<view class='flex flex-wrap align-center anquanyl_fd1_1_c0_c2_higd'>
								<text>{{$t('演练日期：')}}</text>
								<text>{{item.ylrq}}</text>
							</view>
							<view class='flex flex-wrap align-center list_fd1_4_c0_c4_higd' >
								<text class='list_fd1_4_c0_c4_c0_higd'>{{tabsTypefd1_0==1?'未完成':tabsTypefd1_0==1?'演练中':'已完成'}}</text>
								<image class='list_fd1_4_c0_c4_c1_higd' mode="aspectFit" :src='tabsTypefd1_0==1?STATIC_URL+"102.png":tabsTypefd1_0==2?STATIC_URL+"103.png":STATIC_URL+"104.png"'></image>

							</view>
						</view>
					</template>

				</view>
			</view>

			<!---flex布局flex布局结束-->
			<view class="kong" v-if="list.length==0 && isshow">
				<image :src="benbenImageSrcResolution('order.png', 'global')"></image>
			</view>

		</view>
	</page-body>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'

	export default {
		components: {},


		data() {
			return {
				"tabsInfofd1_0": {
					lineleft: '',
					lineWidth: '',
					moveX: 0,
					scrollX: 0,
					PageScrollX: 0,
					isInit: false
				},
				"tabsTypefd1_0": "1",
				/** xq【校区id】 **/
				"xq": "",
				"list": [],
				isshow: false,
			};
		},
		computed: {

		},
		watch: {},
		onLoad(options) {

		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {
			this.xq = uni.getStorageSync('USER_XQ')
			this.getjs86cbd8b89838Func()
		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {
			this.getjs86cbd8b89838Func()
		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			//查询演练归档
			async getjs86cbd8b89838Func() {
				//请求方法
				//数据验证
				this.isshow = false
				let datalist = await this.$api.get(global.apiUrls.post686cbd8b89838, {
					xqm: this.xq,
					// xqm: 1,
					type: this.tabsTypefd1_0
				});
				this.isshow = true
				if (datalist.data.code != 1) {
					this.$message.info(datalist.data.msg);
					return
				}
				let infolist = datalist.data;
				this.list = infolist.data

			},
			check(index) {
				this.list=[]
				this.tabsTypefd1_0 = index
				this.getjs86cbd8b89838Func()
			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #F8F8F8;
		background-size: 100% auto;

		.kong {
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			padding: 120upx 0 0 0;
			width: 100%;

			image {
				width: 300rpx;
				height: 300rpx;
			}
		}

		.checkTitlefd1_0_higd {
			font-weight: 700 !important;
			font-size: 28rpx !important;
			color: #333 !important;
			background-color: rgba(255, 255, 255, 1) !important;
		}

		.anquanyl_linefd1_0_higd {
			width: 100rpx;
			height: 8rpx;
			top: 80rpx;
			background: #d53215;
			background-size: 100% auto !important;
		}

		.anquanyl_fd1_1_higd {
			padding: 20rpx 32rpx 20rpx 32rpx;

			.anquanyl_fd1_1_c0_higd {
				padding: 32rpx 20rpx 32rpx 20rpx;
				background: rgba(255, 255, 255, 1);
				background-size: 100% auto;
				border-radius: 16rpx;
				position: relative;

				.anquanyl_fd1_1_c0_c0_higd {
					margin: 0rpx 0rpx 24rpx 0rpx;
				}

				.anquanyl_fd1_1_c0_c1_higd {
					background: #F8F8F8;
					width: 638rpx;
					height: 151rpx;
					border-radius: 16rpx;
					margin: 0rpx 0rpx 24rpx 0rpx;
				}

				.anquanyl_fd1_1_c0_c2_higd {
					font-size: 26rpx;
					color: rgba(102, 102, 102, 1);
				}

				.list_fd1_4_c0_c4_higd {
					position: absolute;
					width: 116rpx;
					height: 48rpx;
					top: 0rpx;
					right: 0rpx;
					z-index: 1;
				}

				.list_fd1_4_c0_c4_c0_higd {
					color: var(--benbenFontColor3);
					text-align: center;
					width: 116rpx;
					line-height: 48rpx;
					position: absolute;
					z-index: 2;
					font-size: 24rpx;
				}

				.list_fd1_4_c0_c4_c1_higd {
					width: 116rpx;
					height: 48rpx;
					border-radius: 0rpx;
					position: absolute;
					top: 0rpx;
					right: 0rpx;
				}
			}
		}

		.anquanyl_fd1_1_c0_c1_c0_c0_higd {
			margin: 0rpx 0rpx 28rpx 0rpx;
			font-size: 24rpx;
			color: rgba(102, 102, 102, 1);
		}

		.anquanyl_fd1_1_c0_c1_c0_c1_higd {
			font-weight: 500;
		}

		.anquanyl_flex_0_higd {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			z-index: 10;
			top: 0rpx;
			background: #fff;
			background-size: 100% auto !important;

			.anquanyl_fd0_0_higd {
				padding: 0rpx 32rpx 0rpx 32rpx;

				.anquanyl_fd0_0_c1_c0_higd {
					font-size: 36rpx;
					font-weight: 700;
					color: #333333;
					line-height: 50rpx;
				}
			}
		}

		.anquanyl_fd0_0_c0_higd {
			width: 120rpx;

			.anquanyl_fd0_0_c0_c0_higd {
				font-size: 36rpx;
				color: #333;
			}
		}
	}

	::v-deep .anquanyl_benbenTabsfd1_0_higd {
		width: 750rpx;
		height: 90rpx;
		white-space: nowrap;
		background: #fff;
		text-align: center;
	}
</style>
